<!--
 * @Author: liaoyu1992 1519778181@qq.com
 * @Date: 2022-11-05 00:07:28
 * @LastEditors: liaoyu1992 1519778181@qq.com
 * @LastEditTime: 2022-11-11 22:02:09
 * @FilePath: \kgantt\core\components\other\HorizontalScroll.vue
 * @Description: 
-->
<template>
  <div class="kgantt-nowrap-space" v-if="showScorll">
    <div
      v-if="listWidth"
      dir="ltr"
      :style="scrollTaskStyle"
      class="kgantt-scrollWrapper"
      @scroll="onScrollTask"
      ref="scrollTaskRef"
    >
      <div :style="'width:' + taskListViewWidth + 'px'" class="kgantt-scrollX" />
    </div>
    <div
      dir="ltr"
      :style="scrollStyle"
      class="kgantt-scrollWrapper"
      @scroll="onScroll"
      ref="scrollRef"
    >
      <div :style="'width:' + svgWidth + 'px'" class="kgantt-scrollX" />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref, nextTick, watch } from "vue";
const props = defineProps({
  scroll: {
    type: Number,
    default: 0,
  },
  scrollTask: {
    type: Number,
    default: 0,
  },
  listWidth: {
    type: String,
    default: "",
  },
  svgWidth: {
    type: Number,
    default: 0,
  },
  taskListViewWidth: {
    type: Number,
    default: 0,
  },
  rtl: {
    type: Boolean,
    default: false,
  },
});
const emits = defineEmits(["onScroll","onScrollTask"]);
const showScorll = ref(false);
const scrollRef = ref<HTMLDivElement>();
const scrollTaskRef = ref<HTMLDivElement>();
const scrollStyle = ref("");
const scrollTaskStyle = ref("");
const updateStyle = (width: number) => {
  if (props.rtl) {
    scrollStyle.value = `right: ${width}px`;
    scrollTaskStyle.value = `right: 0px`;
  }
  scrollStyle.value = `left: ${width}px`;
  scrollTaskStyle.value = `left: 0px`;
};
const onScroll = (event: Event) => {
  emits("onScroll", event);
};
const onScrollTask = (event: Event) => {
  emits("onScrollTask", event);
};
watch(
  () => props.scroll,
  () => {
    if (scrollRef.value) {
      scrollRef.value.scrollLeft = props.scroll;
    }
  }
);
watch(
  () => props.scrollTask,
  () => {
    if (scrollTaskRef.value) {
      scrollTaskRef.value.scrollLeft = props.scrollTask;
    }
  }
);
const show = (width: number) => {
  updateStyle(width);
  showScorll.value = true;
};
defineExpose({ show });
onMounted(() => {
  nextTick(() => {
    if (scrollRef.value) {
      scrollRef.value.scrollLeft = props.scroll;
    }
    if (scrollTaskRef.value) {
      scrollTaskRef.value.scrollLeft = props.scrollTask;
    }
  });
});
</script>